<template>
	<view class="content">
		<view class="list-container">
			<view class="shenhe-list clear edit_con">
				<text class="left input_text " >
					客户姓名
				</text>
				<input type="text" placeholder="请输入客户姓名" v-model="nickname" placeholder-style="font-size:30rpx;color:#999999" class="no_border_input left" />
			</view>	
			<view class="shenhe-list clear edit_con">
				<text class="left input_text" >
					联系电话
				</text>
				<input type="text" placeholder="请输入联系电话" v-model="mobile" placeholder-style="font-size:30rpx;color:#8d8a8a" class="no_border_input left" @blur="testphone(1)" />
			    <text class="message">{{message1}}</text>
			</view>	
			<view class="shenhe-list clear edit_con">
				<text class="left input_text" >
					紧急联系人
				</text>
				<input type="text" placeholder="请输入紧急联系人" v-model="linkname" placeholder-style="font-size:30rpx;color:#999999" class="no_border_input left" />
			</view>	
			<view class="shenhe-list clear edit_con">
				<text class="left input_text" >
					紧急联系人电话
				</text>
				<input type="text" placeholder="请输入紧急联系人" v-model="linkphone" placeholder-style="font-size:30rpx;color:#999999" class="no_border_input left"  @blur="testphone(2)"/>
			    <text class="message">{{message2}}</text>
			</view>	
			<view class="shenhe-list clear edit_con">
				<text class="left input_text" >
					公司地址
				</text>
				<input type="text" placeholder="请输入公司地址" v-model="address" placeholder-style="font-size:30rpx;color:#999999" class="no_border_input left" />
			</view>	
			<view class="clear shenhe-text shenhe-text1" >
				<text class="left">上传合同</text>
				
			</view>
			<view class="clear hetong-list">
				<view class="left" v-for="(item,index) in hetong1" key="index" style="position: relative;">
					<icon type="clear" class="del_pic" size="15" @tap.stop="del_pic(4,item.url1,index)"></icon>
					<image :src="item.url" @tap="yulan(item.url)"></image>
				</view>
				<view class="left" v-if="btn_show1" @tap="uploadimg(4)" style="position: relative;">
					<image src="../../static/img/upload-icon.png" ></image>
				</view>
			</view>
			<view class="clear shenhe-text shenhe-text1" >
				<text class="left">身份证/驾驶证（身份证请上传正反面）</text>
				
			</view>
			<view class="clear hetong-list">
				<view class="left" v-for="(item,index) in numberpic1" key="index" style="position: relative;">
					<icon type="clear" class="del_pic" size="15" @tap.stop="del_pic(1,item.url1,index)"></icon>
					<image :src="item.url" @tap="yulan(item.url)"></image>
				</view>
				<view class="left" v-if="btn_show1" @tap="uploadimg(1)" style="position: relative;">
					<image src="../../static/img/upload-icon.png" ></image>
				</view>
				
			</view>
			<view class="clear shenhe-text shenhe-text1" >
				<text class="left">营业执照/工作证明</text>
				
			</view>
			<view class="clear hetong-list">
				<view class="left" v-for="(item,index) in business1" :key="index" style="position: relative;">
					<icon type="clear" class="del_pic" size="15" @tap="del_pic(2,item.url1,index)"></icon>
					<image :src="item.url" @tap="yulan(item.url)"></image>
				</view>
				<view class="left" v-if="btn_show2" @tap="uploadimg(2)">
					<image src="../../static/img/upload-icon.png"></image>
				</view>
			</view>
			<view class="clear shenhe-text shenhe-text1" >
				<text class="left">其他附件</text>
				
			</view>
			<view class="clear hetong-list">
				<view class="clear hetong-list">
					<view class="left" v-for="(item,index) in otherpic1" :key="index" style="position: relative;">
						<icon type="clear" class="del_pic" size="15" @tap="del_pic(3,item.url1,index)"></icon>
						<image :src="item.url" @tap="yulan(item.url)"></image>
						
					</view>
					
					<view class="left" v-if="btn_show2"  @tap="uploadimg(3)">
						<image src="../../static/img/upload-icon.png"></image>
					</view>
				</view>
			</view>
		</view>
		<button class="big_button button_shadow" style="margin: 100rpx auto;" @tap="save()"> 
			保存
		</button>
	</view>
</template>

<script>

	import httpPath from '@/static/js/path.js';
	import {getlogin} from '@/static/js/login.js';
	import {fmoney} from '@/static/js/login.js';
	export default {
		data() {
			return {
				id:"",
				nickname:"",
				user:{},//用户登录信息
				address:"",//用户的地址
				mobile:"",//联系人
				linkname:"",//紧急联系人
				linkphone:"",//紧急联系人电话
				nicheng:"",//昵称
				numberpic:"",//身份证，驾驶证
				numberpic1:[],//身份证，驾驶证
				business:"",//营业执照，工作证
				business1:[],//营业执照，工作证
				otherpic:"",//其他附件
				otherpic1:[],//其他附件
				btn_show1:true,//上传图片的按钮是否出现
				btn_show2:true,//上传图片的按钮是否出现
				hetong:"",//合同的字符串
				hetong1:[],//合同的字符串
				user:"",//登录信息
				message1:'',//联系电话的提示
				message2:'',//紧急联系电话的提示
			}
		},
		onLoad(option) {
			
			this.user = getlogin();
			if(!this.user.islogin){
				uni.showModal({
				   showCancel:false,
				   content:"您还没有登录，请登录"
				})
				uni.navigateTo({
					url:"../public/login"
				})
			}
			if(option.id){
				this.id=option.id;
				this.getinfo();
			}
			// 
		
		},
		methods: { 
			testphone(type){
				var $phone=/^1(3|4|5|6|7|8|9)\d{9}$/;
				if(type==1){					
					console.log(!$phone.test(this.mobile))
					if(!$phone.test(this.mobile)){
						this.message1="请输入正确的电话号码"
					}else{
						this.message1=""
					}
				}else{
					if(!$phone.test(this.linkphone)){
						this.message2="请输入正确的电话号码"
					}else{
						this.message2=""
					}
				}
			},
			yulan(img){
			  uni.previewImage({
				  urls: [img],
				  longPressActions: {
					  // itemList: ['发送给朋友', '保存图片', '收藏'],
					  success: function(data) {
						  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					  },
					  fail: function(err) {
						  console.log(err.errMsg);
					  }
				  }
			  });
			},
			getinfo(){//获取客户端首页信息
				uni.request({
					url: httpPath.filePath+'/api.php/index/user/look_customer',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {member_id:this.user.member_id,user_id:this.user.user_id,id:this.id},
					success: (res) => {
						if(res.data.code=="200"){	
							this.mobile=res.data.result.phone;
							this.linkname=res.data.result.linkname;
							this.linkphone=res.data.result.linkphone;
							this.address=res.data.result.address;
							this.nickname=res.data.result.nickname;
							if(res.data.result.hetong!=null&&res.data.result.hetong!=""&&res.data.result.hetong!=0){
								let num=this.str_array(res.data.result.hetong);
								for (let i=0;i<num.length;i++) {
									this.hetong1.push({url:httpPath.filePath+"/static/upload/image/"+num[i],url1:num[i]})
								}								
							}	
							if(res.data.result.numberpic!=null&&res.data.result.numberpic!=""){
								let num=this.str_array(res.data.result.numberpic);
								for (let i=0;i<num.length;i++) {
									this.numberpic1.push({url:httpPath.filePath+"/static/upload/image/"+num[i],url1:num[i]})
								}								
							}	
							if(res.data.result.business!=null&&res.data.result.business!=""){
								let num=this.str_array(res.data.result.business);
								for (let i=0;i<num.length;i++) {
									this.business1.push({url:httpPath.filePath+"/static/upload/image/"+num[i],url1:num[i]})
								}
							}
							if(res.data.result.otherpic!=null||res.data.result.otherpic!=""){
								this.otherpic=res.data.result.otherpic+",";
								let num=this.str_array(res.data.result.otherpic);
								for (let i=0;i<num.length;i++) {
									this.otherpic1.push({url:httpPath.filePath+"/static/upload/image/"+num[i],url1:num[i]})
								}
							}
							
						}   
					}
				});
				
			},
			//将字符串转化成数组
			str_array(str){
				let arry=[];
				if(str==""||str==null){
					arry=[];
				}else if(str.indexOf(",")==-1){
					arry.push(str)
				}else{
					arry=str.split(",")
				}
				return arry;
			},
			/*
			* 删除图片
			* type 1:身份证，驾驶证；2营业执照；3其他附件4合同
			* url图片路径
			* index图片顺序
			*/

			del_pic(type,url,index){
				
				let _this=this;	
				if(type==1){
					_this.numberpic1.splice(index,1);
				}else if(type==2){
					_this.business1.splice(index,1);
				}else if(type==3){
					_this.otherpic1.splice(index,1);
				}else if(type==4){
					_this.hetong1.splice(index,1);
					console.log(_this.hetong1)
				}
			},
			uploadimg(type){//上传图片
				let _this=this;  
			   // console.log(type)
			   type += '' 
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album','camera'], //从相册选择
					success: function (res) {	
					   for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: httpPath.filePath+'/api.php/index/login/uplode_images', //仅为示例，非真实的接口地址
								filePath:res.tempFilePaths[i],
								name: 'upload-images',
								formData: {
									type:type
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes)
									let data =  eval("("+uploadFileRes.data+")");
									if(type=="1"){	
										_this.numberpic1.push({"url":httpPath.filePath+"/static/upload/image/"+data,"url1":data});
									}
									if(type=="2"){
										_this.business1.push({"url":httpPath.filePath+"/static/upload/image/"+data,"url1":data});
										
									}
									if(type=="3"){
										_this.otherpic1.push({"url":httpPath.filePath+"/static/upload/image/"+data,"url1":data});
										
									}
									if(type=="4"){
										_this.hetong1.push({"url":httpPath.filePath+"/static/upload/image/"+data,"url1":data});
										
									}
									
								}
							});
					   }
					   
					}
				});
			},
			/*
			*保存数据
			* */
			save(){
				var $phone=/^1(3|4|5|6|7|8|9)\d{9}$/;
				if(this.nickname==""||this.nickname==null){
					uni.showModal({
						showCancel:false,
						content:"请输入真实姓名"
					})
					return false;
				}
				if(this.mobile==""||this.mobile==null){
					uni.showModal({
						showCancel:false,
						content:"请输入联系电话"
					})
					return false;
				}else if(!$phone.test(this.mobile)){
					uni.showModal({
						showCancel:false,
						content:"请输入正确的电话号码"
					})
					return false;
				}
				if(this.linkname==""||this.linkname==null){
					uni.showModal({
						showCancel:false,
						content:"请输入紧急联系人"
					})
					return false;
				}
				if(this.linkphone==""||this.linkphone==null){
					uni.showModal({
						showCancel:false,
						content:"请输入紧急联系人电话"
					})
					return false;
				}else if(!$phone.test(this.linkphone)){
					uni.showModal({
						showCancel:false,
						content:"请输入正确的电话号码"
					})
					return false;
				}
				if(this.address==""||this.address==null){
					uni.showModal({
						showCancel:false,
						content:"请输入公司地址"
					})
					return false;
				}
				if(this.hetong1.length==0){
					uni.showModal({
						showCancel:false,
						content:"请上传合同"
					})
					return false;
				}else{
					this.hetong="";
					for(let i=0;i<this.hetong1.length;i++){
						this.hetong+=this.hetong1[i].url1+",";
					}
					var reg=/,$/gi;
					this.hetong=this.hetong.replace(reg,"");
				}
				if(this.numberpic1.length==0){
					uni.showModal({
						showCancel:false,
						content:"请上传身份证/驾驶证"
					})
					return false;
				}else{
					this.numberpic="";
					for(let i=0;i<this.numberpic1.length;i++){
						this.numberpic+=this.numberpic1[i].url1+",";
					}
					var reg=/,$/gi;
					this.numberpic=this.numberpic.replace(reg,"");
				}
				if(this.business1.length==0){
					uni.showModal({
						showCancel:false,
						content:"请上传营业执照/工作证明"
					})
					return false;
				}else{
					this.business="";
					for(let i=0;i<this.business1.length;i++){
						this.business+=this.business1[i].url1+",";
					}
					var reg=/,$/gi;
					this.business=this.business.replace(reg,"");
				}
				if(this.otherpic1.length!=0){
					this.otherpic="";
					for(let i=0;i<this.otherpic1.length;i++){
						this.otherpic+=this.otherpic1[i].url1+",";
					}
					var reg=/,$/gi;
					this.otherpic=this.otherpic.replace(reg,"");
				}
				if(this.id){
					uni.request({
						url: httpPath.filePath+'/api.php/index/user/customer_edit/',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {id:this.id,nickname:this.nickname,member_id:this.user.member_id,address:this.address,mobile:this.mobile,linkname:this.linkname,linkphone:this.linkphone,numberpic:this.numberpic,business:this.business,otherpic:this.otherpic,hetong:this.hetong,user_id:this.user.user_id},
						success: (res) => {
							if(res.data.code=="200"){
								uni.showModal({
									showCancel:false,
									content:"修改资料成功"
								})
								// uni.navigateBack()
							}else{
								uni.showModal({
									showCancel:false,
									content:res.data.message
								})
							 }  
						}
					});
				}else{
					uni.request({
						url: httpPath.filePath+'/api.php/index/user/customer_add/',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {nickname:this.nickname,member_id:this.user.member_id,address:this.address,mobile:this.mobile,linkname:this.linkname,linkphone:this.linkphone,numberpic:this.numberpic,business:this.business,otherpic:this.otherpic,hetong:this.hetong,user_id:this.user.user_id},
						success: (res) => {
							if(res.data.code=="200"){
								uni.showModal({
									showCancel:false,
									content:"资料提交成功"
								})
								uni.navigateBack()
							}else{
								uni.showModal({
									showCancel:false,
									content:res.data.message
								})
							 }  
						}
					});
				}
			}
		}
	}

	
</script>

<style>
	@import "../../colorui/main.css";
	.message{position: absolute;top: 34px;font-size: 20rpx;color: #FF0000;left: 37%;}
	page{background: #FFFFFF;}
	.hetong-list image{width: 100%;height: 100%;}
	.shenhe-text1{line-height: 120rpx!important;color: #323232;}
	.edit_con{padding: 10px 0px;}
</style>
